
import React from 'react'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { Layout, Dropdown, Menu,Avatar } from 'antd';
import { withRouter } from 'dva/router';

import { connect } from 'dva'
import changeCollapsed from '../../actionReducer/changeCollapsed';

const { Header} = Layout;

function TopHeader(props) {
    const { role: { roleName }, username } = JSON.parse(localStorage.getItem('token'))
    // const [collapsed, setCollapsed] = useState(false);
    // const changeCollapsed = () => {
    //     props.dispatch({
    //         type: 'News/changeCollapsed'

    //     })
    // }
    const { 
        collapsed, 
        changeCollapsed ,
    } = props
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: roleName ,
                },
                {
                    key: '2',
                    danger: true,
                    label: '退出',
                    onClick: () => {
                        localStorage.removeItem('token')
                        props.history.push('/login')
                    }
                },
            ]}
        />
    );

    
    return (
        <Header
            className="site-layout-background"
            style={{
                padding: '0 16px',
            }}
        >
            {/* {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: () => setCollapsed(!collapsed),
            })} */}
            {
                collapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : 
                    <MenuFoldOutlined onClick={changeCollapsed} />
            }

            <div style={{float:'right'}}>
                <span>欢迎<span style={{color:'#1890ff'}}>{username}
                    </span>回来</span>
                <Dropdown overlay={menu}>
                    <Avatar size="large" icon={<UserOutlined />} />
                </Dropdown>
            </div>
        </Header>
    )
}
const mapStateToProps = (state) => {
    return {
        collapsed: state.News.collapsed
    }
}
const mapDispatchToProps = {
    changeCollapsed
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TopHeader))